import { Input, Radio, Space, Grid, Message } from '@arco-design/web-react'
import React, { useState, useEffect } from 'react'
import PromptTagInput from './components/PromptTagInput'
import AIGenerateInput from './components/AIGenerateInput';
import PromptFavorites from './components/PromptFavorites';

enum Type {
  TAG_SEARCH,
  TEXT,
  AI_GENERATE,
}

type IProps = {
  value?: string,
  onChange?: (value: string) => void;
}

const options = [
  { value: Type.TAG_SEARCH, label: '标签搜索' },
  { value: Type.TEXT, label: '文本输入' },
  { value: Type.AI_GENERATE, label: 'AI生成' }
]

const PromptInput = (props: IProps) => {
  const [type, setType] = useState(Type.TAG_SEARCH);
  return (
    <Space direction='vertical' className="w-full">
      <Grid.Row justify='space-between'>
        <Radio.Group size="mini" type="button" value={type} onChange={setType}>
          {options.map(item => <Radio value={item.value} key={item.value}>{ item.label}</Radio>)}
        </Radio.Group>
        <PromptFavorites value={props.value} onChange={props.onChange} />
      </Grid.Row>
      {{
        [Type.TAG_SEARCH]: <PromptTagInput {...props} />,
        [Type.TEXT]: <Input.TextArea placeholder='请输入英文提示词，不同提示词用逗号隔开' autoSize {...props} />,
        [Type.AI_GENERATE]: <AIGenerateInput {...props} />,
      }[type]}
    </Space>
  )
}

export default PromptInput
